<div [@routerTransition]>
    <div class="m-portlet m-portlet--mobile" #stockbasediv>
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        查询条件
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-subheader">
            <div class="row align-items-center">
                <div class="col-md-10">
                    <div class="row align-items-center">
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right; ">物料编号:</label>
                            <div class="col-8">
                                <input
                                    [(ngModel)]="f_MaterialCode"
                                    name="f_MaterialCode"
                                    #nameInput="ngModel"
                                    class="form-control m-input"
                                    type="text"
                                />
                            </div>
                        </div>
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right;">物料名称:</label>
                            <div class="col-8">
                                <input
                                    id="f_MaterialName"
                                    #nameInput="ngModel"
                                    class="form-control"
                                    type="text"
                                    name="f_MaterialName"
                                    [(ngModel)]="f_MaterialName"
                                    maxlength="32"
                                />
                            </div>
                        </div>
                        <!-- <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">供应商:</label>
                                <div class="col-8">
                                    <input
                                        id="f_PrimaryVendorId"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_PrimaryVendorId"
                                        [(ngModel)]="f_PrimaryVendorId"
                                        maxlength="32"
                                    />
                                </div>
                            </div>
                            <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">制造商:</label>
                                <div class="col-8">
                                    <input
                                        id="f_CAL_Manufacturer"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_CAL_Manufacturer"
                                        [(ngModel)]="f_CAL_Manufacturer"
                                        maxlength="32"
                                    />
                                </div>
                            </div> -->
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right;">品牌:</label>
                            <div class="col-8">
                                <input
                                    [(ngModel)]="f_TradeMark"
                                    name="f_TradeMark"
                                    #nameInput="ngModel"
                                    class="form-control m-input"
                                    type="text"
                                />
                            </div>
                        </div>
                        <!-- <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">状态:</label>
                                <div class="col-8">
                                    <input
                                        id="f_Station"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_Station"
                                        [(ngModel)]="f_Station"
                                        maxlength="32"
                                    />
                                </div>
                            </div>
                            <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">技术条件:</label>
                                <div class="col-8">
                                    <input
                                        id="f_TecCondition"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_TecCondition"
                                        [(ngModel)]="f_TecCondition"
                                        maxlength="32"
                                    />
                                </div>
                            </div> -->
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right;">规格:</label>
                            <div class="col-8">
                                <input
                                    id="f_Specification"
                                    #nameInput="ngModel"
                                    class="form-control"
                                    type="text"
                                    name="f_Specification"
                                    [(ngModel)]="f_Specification"
                                    maxlength="32"
                                />
                            </div>
                        </div>
                        <!-- <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">质量等级:</label>
                                <div class="col-8">
                                    <input
                                        id="f_QualityLevel"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_QualityLevel"
                                        [(ngModel)]="f_QualityLevel"
                                        maxlength="32"
                                    />
                                </div>
                            </div>
                            <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">管理维度:</label>
                                <div class="col-8">
                                    <camc-dropdown
                                        class="float-left"
                                        id="f_DimensionGroup"
                                        [options]="f_DimensionGroupOptions"
                                        name="f_DimensionGroup"
                                        [(ngModel)]="f_DimensionGroup"
                                        [style]="{ width: '140px', margin: '0 6px' }"
                                        placeholder="请选择管理维度"
                                    >
                                    </camc-dropdown>
                                </div>
                            </div> -->
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right;">精度:</label>
                            <div class="col-8">
                                <input
                                    id="f_CAL_ItemPrecision"
                                    #nameInput="ngModel"
                                    class="form-control"
                                    type="text"
                                    name="f_CAL_ItemPrecision"
                                    [(ngModel)]="f_CAL_ItemPrecision"
                                    maxlength="32"
                                />
                            </div>
                        </div>
                        <!-- <div  class="row col-md-3 ">
                                <label class="col-4 col-form-label" style="text-align: right;">型号:</label>
                                <div class="col-8">
                                    <input
                                        id="f_CAL_ItemHardDegree"
                                        #nameInput="ngModel"
                                        class="form-control"
                                        type="text"
                                        name="f_CAL_ItemHardDegree"
                                        [(ngModel)]="f_CAL_ItemHardDegree"
                                        maxlength="32"
                                    />
                                </div>
                            </div> -->
                        <div class="row col-md-3 ">
                            <label class="col-4 col-form-label" style="text-align: right;">计量单位:</label>
                            <div class="col-8">
                                <input
                                    id="f_UnitId"
                                    #nameInput="ngModel"
                                    class="form-control"
                                    type="text"
                                    name="f_UnitId"
                                    [(ngModel)]="f_UnitId"
                                    maxlength="32"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">
                    <button (click)="getBaseField($event)" class="btn btn-primary blue m--margin-10" type="button">
                        <i class="flaticon-search-1" [attr.aria-label]="l('Search')"> </i> 查询
                    </button>
                    <button (click)="clearquery()" class="btn btn-primary blue m--margin-10" type="button">
                        清空查询
                    </button>
                </div>
            </div>
        </div>

        <div class="m-portlet__body" style="border-top: 1px solid #ebedf2;  margin-top: 11px;">
            <div class="m-subheader">
                <div class="align-items-center row" style="margin: 0;">
                    <div class="col-md-6">
                        <h4 class="m-subheader__title">基础信息</h4>
                    </div>
                    <div class="col-md-6 m--align-right" *ngIf="_edit == '1'">
                        <div class="btn-group m-btn-group" role="group" aria-label="...">
                            <button
                                type="button"
                                class="btn btn-default m--padding-left-5 m--padding-right-5"
                                (click)="
                                    createOrEditMarkBaseInfoModal.showinfo(undefined, codeItemId, codeName, filterText)
                                "
                                *ngIf="permission.isGranted('Pages.Market.BaseInfo.Create')"
                            >
                                新增
                            </button>
                            <button
                                [disabled]="!selectedValue"
                                type="button"
                                class="btn btn-default m--padding-left-5 m--padding-right-5"
                                 (click)="createOrEditMarkBaseInfoModal.showinfo(selectedValue.stock_BaseFieldListDto.id)"
                                *ngIf="permission.isGranted('Pages.Market.BaseInfo.Create')"
                            >
                                编辑
                            </button>
                            <button
                                [disabled]="!selectedValue"
                                type="button"
                                class="btn btn-default m--padding-left-5 m--padding-right-5"
                                (click)="delete(selectedValue.stock_BaseFieldListDto.id)"
                                *ngIf="permission.isGranted('Pages.Market.BaseInfo.Delete')"
                            >
                                删除
                            </button>
                            <!-- <button
                                [disabled]="!selectedValue"
                                type="button"
                                class="btn btn-default m--padding-left-5 m--padding-right-5"
                                (click)="markbaseFieldDetailModal.showinfo(selectedValue.stock_BaseFieldListDto.id, _type)"
                            >
                                详细信息
                            </button> -->
                            <!-- <button
                                type="button"
                                *ngIf="permission.isGranted('Pages.Market.BaseInfo.Sys')"
                                class="btn btn-default m--padding-left-5 m--padding-right-5"
                                (click)="sysData()"
                            >
                                同步数据
                            </button> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabbable-line">
                <div class="tab-content" style="padding-top:0;">
                    <div class="tab-pane active" id="tab-model">
                        <div class="row align-items-center">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table
                                    #dataTable
                                    (onLazyLoad)="getBaseField($event)"
                                    [value]="primengTableHelper.records"
                                    [rows]="20"
                                    [paginator]="false"
                                    [lazy]="true"
                                    [scrollable]="true"
                                    ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns"
                                    [(selection)]="selectedValue"
                                    selectionMode="single"
                                    (onRowSelect)="rowSelect()"
                                >
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 40px">
                                                序号
                                            </th>
                                            <ng-container *ngFor="let ext of extensions">
                                                <th width="{{ ext.width }}">
                                                    {{ ext.title }}
                                                </th>
                                            </ng-container>
                                        </tr>
                                    </ng-template>

                                    <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                        <tr [pSelectableRow]="record">
                                            <td style="width: 40px">
                                                {{ i + 1 + paginator.first }}
                                            </td>
                                            <ng-container *ngFor="let ext of extensions">
                                                <ng-container [ngSwitch]="ext.formatType">
                                                    <ng-container *ngSwitchCase="1">
                                                        <td width="{{ ext.width }}">
                                                            {{ record[ext.key] | number: '1.0-0' }}
                                                        </td>
                                                    </ng-container>
                                                    <ng-container *ngSwitchCase="2">
                                                        <td width="{{ ext.width }}">
                                                            {{ record[ext.key] | number: '1.2-2' }}
                                                        </td>
                                                    </ng-container>
                                                    <ng-container *ngSwitchCase="4">
                                                        <td width="{{ ext.width }}">
                                                            {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                        </td>
                                                    </ng-container>
                                                    <ng-container *ngSwitchDefault>
                                                        <td width="{{ ext.width }}">
                                                            {{ record[ext.key] }}
                                                        </td>
                                                    </ng-container>
                                                </ng-container>
                                            </ng-container>
                                        </tr>
                                    </ng-template>
                                </p-table>

                                <div class="primeng-paging-container">
                                    <p-paginator
                                        [rows]="20"
                                        #paginator
                                        (onPageChange)="getBaseField($event)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                    >
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <createOrEditMarkBaseInfoModal
        #createOrEditMarkBaseInfoModal
        (modalSave)="getBaseField()"
    ></createOrEditMarkBaseInfoModal>
    <markbaseFieldDetailModal #markbaseFieldDetailModal></markbaseFieldDetailModal>
</div>
